import './index.scss'
import {Col, Input, message, Modal, Row} from "antd";
import React, {useEffect, useState} from "react";
import {
    FormOutlined,
    CloseCircleOutlined
} from '@ant-design/icons';
import store from "../../../store";
import {observer} from 'mobx-react'

const TagList = () => {
    // 是否显示编辑对话框
    const [isEditModalOpen, setIsEditModalOpen] = useState(false);
    // 是否显示删除对话框
    const [isDelModalOpen, setIsDelModalOpen] = useState(false);
    //当前选中的标签
    const [checkLabel,setCheckLabel]=useState({tagId:'',tagName:''})
    //点击编辑
    const editLabel = (obj) => {
        setCheckLabel(obj)
        setIsEditModalOpen(true);
    }
    //编辑标签
    const change = (ev) => {
        let _checkLabel={...checkLabel}
        _checkLabel.tagName=ev.target.value
        setCheckLabel(_checkLabel)
    }
    //编辑保存
    const editOk = () => {
        store.contentLabel.editLabel(checkLabel)
        setIsEditModalOpen(false);
    };
    // 编辑取消
    const editCancel = () => {
        setIsEditModalOpen(false);
    };
    // 删除
    const delLabel = (obj) => {
        setCheckLabel(obj)
        setIsDelModalOpen(true);
    }
    //确定删除
    const delOk = () => {
        let obj={
            ids:[],
            state:''
        }
        obj.ids.push(checkLabel.tagId)
        obj.state=checkLabel.tagName
        store.contentLabel.delLabel(obj)
        setIsDelModalOpen(false);
    };
    // 取消删除
    const delCancel = () => {

        setIsDelModalOpen(false);
    };
    useEffect(() => {
        if (store.contentLabel.labelArr.length === 0) {
            store.contentLabel.getAllLabel()
        }
    }, [])
    return <Row gutter={[16, 24]} id="tagList">
        {store.contentLabel.labelArr.map((v, i) => <Col className="gutter-row" span={4} key={i}>
            <div className={"tag"}>
                {v.tagName}
                <div className={'tagOperation'}>
                    <FormOutlined className={"edit"} onClick={() => editLabel(v)}/>
                    <CloseCircleOutlined className={"del"} onClick={() => delLabel(v)}/>
                </div>
            </div>
        </Col>)}
        <Modal
            title="添加标签"
            open={isEditModalOpen}
            onOk={editOk}
            onCancel={editCancel}
            cancelText={'取消'}
            okText={'保存'}
        >
            <Input value={checkLabel.tagName} onChange={change}/>
        </Modal>
        <Modal
            title="删除标签"
            open={isDelModalOpen}
            onOk={delOk}
            onCancel={delCancel}
            cancelText={'取消'}
            okText={'确定'}
        >
            <p>确定删除该标签吗?</p>
        </Modal>
    </Row>
}
export default observer(TagList)